import React from 'react';
import { Card, List, Space, Typography } from 'antd';
import { Link } from 'umi';

const ItemList = (props) => {
  const { itemList } = props;

  const cardList = itemList && (
    <List
      rowKey="id"
      grid={{
        gutter: 16,
        xs: 1,
        sm: 2,
        md: 3,
        lg: 3,
        xl: 4,
        xxl: 4,
      }}
      dataSource={itemList}
      renderItem={(item) => (
        <List.Item>
          <Link to={`/trade/item/${item.id}`}>
            <Card
              hoverable
              cover={<img alt={item.name} src={`/api/getFile/?fileHash=${item.fileHash}`} />}
            >
              <Card.Meta
                title={[
                  <Space key={1} style={{ width: '70%' }} align="start" direction="vertical">
                    <Typography.Text type="secondary">{item.collection.name}</Typography.Text>
                    <Typography.Text>{item.name}</Typography.Text>
                  </Space>,
                ]}
              />
            </Card>
          </Link>
        </List.Item>
      )}
    />
  );

  return <div>{cardList}</div>;
};

export default ItemList;
